<template>
  <div class="full-width color-white">
    <div class="static-box flex">
      <div
        class="flex flex-column mrr20 pointer"
        v-for="(item, index) in jobStatus"
        :key="index"
        @click.stop.prevent="$emit('clickTotal', item)"
      >
        <div class="mrb8">
          <div class="relative position-lt">
            <el-image class="total-bg" :src="item.icon"></el-image>
            <div class="white size18 flex absolute center">
              <span class="bold text-shadow"> {{ item.content }}</span>
              <span class="flex align-end size12">{{ item.unit }}</span>
            </div>
          </div>
        </div>
        <div class="flex flexcc">
          <div class="dot"></div>
          <div class="white size12">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    jobStatus: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },

  created() {},
  mounted() {},
  computed: {},

  methods: {}
};
</script>
<style lang="scss" scoped>
.total-bg {
  width: 76px;
  height: 84px;
  background-size: 100% 100%;
}
.mrr40 {
  margin-right: 40px;
}
</style>
